import React,{ useState,useContext } from 'react'
import logo from './logo.svg'
import './index.css'
import './App.css'
import className from './MilkdownEditor/CodeMirror/style.module.css';
import { GlobalContext } from './globalContext'

import { MilkdownEditor, MilkdownRef } from './MilkdownEditor/MilkdownEditor'
import { CodeMirror, CodeMirrorRef } from './MilkdownEditor/CodeMirror';


const content = "\r\n# Milkdown\r\n\r\n![greeting bear](https://preview.redd.it/us7w1x2zx8461.jpg?auto=webp&s=077a73d5c08aec0bc0fb48c5e5be40c928467bb6)\r\n\r\n> Milkdown 是一个所见即所得的编辑器框架。\r\n>\r\n> :baby_bottle: 这里是[代码仓库](点击右键打开链接)。\\\r\n> 我们 ~~只支持 commonmark~~. GFM 也支持！\r\n\r\n您可以在**双栏编辑模式**中看到 markdown 文本。\r\n\r\n-   特性\r\n    -   [x] 📝 **所见即所得的 Markdown** - 以一种优雅的方式编写 markdown\r\n    -   [x] 🎨 **可定制主题** - 主题可以通过 npm 包安装和共享\r\n    -   [x] 🎮 **可交互** - 通过插件支持你的脑洞\r\n    -   [x] 🦾  **值得信赖** - 基于[prosemirror](https://prosemirror.net/) 和 [remark](https://github.com/remarkjs/remark)构建\r\n    -   [x] ⚡ **斜线指令和工具条** - 让任何人都可以使用，通过插件\r\n    -   [x] 🧮 **数学支持** - LaTeX 数学公式支持，通过插件\r\n    -   [x] 📊 **表格支持** - 拥有流畅的 ui 的表格支持， 通过插件\r\n    -   [x] 📰 **图表支持** - 基于[mermaid](https://mermaid-js.github.io/mermaid/#/)的图表支持，通过插件\r\n    -   [x] 🍻 **协同编辑** - 基于[yjs](https://docs.yjs.dev/)的协同编辑支持，通过插件\r\n    -   [x] 💾 **剪贴板** - 支持 markdown 格式的复制粘贴，通过插件\r\n    -   [x] :+1: **Emoji** - 支持 emoji 快捷指令和选择器，通过插件\r\n-   作者\r\n    -   开发者: [Mirone][mirone]\r\n    -   设计师: [Meo][meo]\r\n\r\n---\r\n\r\n你可以添加行 内代码例如 `inline code` 和代码块：\r\n\r\n```javascript\r\nfunction main() {\r\n    console.log('Hello milkdown!');\r\n}\r\n```\r\n\r\n> Tips: 使用`Mod-Enter`来退出块级元素，例如代码块。\r\n\r\n---\r\n\r\n你可以输入`||`和一个空格来创建表格：\r\n\r\n| 表头 1 |   表头 2   |\r\n| ------ | :--------: |\r\n| 内容 1 | ~~内容 1~~ |\r\n| 内容 2 | **内容** 2 |\r\n\r\n---\r\n\r\n数学公式通过 [TeX 表达式](https://en.wikipedia.org/wiki/TeX)支持。\r\n\r\n这里我们有行内公式： $E = mc^2$，你可以点击并编辑它。\r\n\r\n数学公式块也是支持的。\r\n\r\n$$\r\n\\begin{aligned}\r\nT( (v_1 + v_2) \\otimes w) &= T(v_1 \\otimes w) + T(v_2 \\otimes w) \\\\\r\nT( v \\otimes (w_1 + w_2)) &= T(v \\otimes w_1) + T(v \\otimes w_2) \\\\\r\nT( (\\alpha v) \\otimes w ) &= T( \\alpha ( v \\otimes w) ) \\\\\r\nT( v \\otimes (\\alpha w) ) &= T( \\alpha ( v \\otimes w) ) \\\\\r\n\\end{aligned}\r\n$$\r\n\r\n你可以输入`$$`和一个空格来创建数学公式块。\r\n\r\n---\r\n\r\n使用 [emoji 快捷指令](https://www.webfx.com/tools/emoji-cheat-sheet/) 例如 `:+1:` 来添加 emoji.\r\n\r\n在输入时，你许注意到了 emoji 过滤器，尝试输入`:baby`来查看它。\r\n\r\n你也可以输入`:emoji:`来打开 emoji 选择器。\r\n\r\n---\r\n\r\n图表由 [mermaid](https://mermaid-js.github.io/mermaid/#/)驱动。\r\n\r\n你可以输入 _\\`\\`\\`mermaid_ 来添加图表。\r\n\r\n```mermaid\r\ngraph TD;\r\n    EditorState-->EditorView;\r\n    EditorView-->DOMEvent;\r\n    DOMEvent-->Transaction;\r\n    Transaction-->EditorState;\r\n```\r\n\r\n---\r\n\r\nHave fun!\r\n\r\n[repo]: https://github.com/Saul-Mirone/milkdown\r\n[prosemirror]: https://prosemirror.net/\r\n[yjs]: https://docs.yjs.dev/\r\n[remark]: https://github.com/remarkjs/remark\r\n[mirone]: https://github.com/Saul-Mirone\r\n[meo]: https://www.meo.cool/"

export function App() {
  const [count, setCount] = useState(0)
  const context = useContext(GlobalContext)



    const lockCode = React.useRef(true);
    const milkdownRef = React.useRef<MilkdownRef>(null);
    const codeMirrorRef = React.useRef<CodeMirrorRef>(null);
    // const local = React.useContext(localCtx);
    const [md, setMd] = React.useState(content);

    // React.useEffect(() => {
    //     importDemo(local)
    //         .then((x) => {
    //             setMd(x.default);
    //             return;
    //         })
    //         .catch(console.error);
    // }, [local]);

    const milkdownListener = React.useCallback((getMarkdown: () => string) => {
        const lock = lockCode.current;
        if (lock) return;

        const { current } = codeMirrorRef;
        if (!current) return;
        const result = getMarkdown();
        current.update(result);
    }, []);

    const onCodeChange = React.useCallback((getCode: () => string) => {
        const { current } = milkdownRef;
        if (!current) return;
        const value = getCode();
        current.update(value);
    }, []);

 console.log(context)

  return (
    <div className="App">
  
       <div className={[className.container,className.twoSide].join(' ')}>
            <div className={className.milk}>
                <MilkdownEditor ref={milkdownRef} content={md} onChange={milkdownListener} />
            </div>
            <CodeMirror ref={codeMirrorRef} value={md} onChange={onCodeChange} dark={false} lock={lockCode} />
        </div>
    </div>
  )
}


export default App;
